<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Menus - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Menus - Pure"><meta data-react-helmet="true" name="description" content="Simple CSS for menus."><meta data-react-helmet="true" property="og:description" content="Simple CSS for menus."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/2.5dabb085.js" as="script">

<link rel="preload" href="/52fb11dd.87d97c96.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="menus"><div class="header"><h1>Menus</h1><h2>Simple CSS for menus.</h2></div><div class="content"><h2 id="vertical-menu" class="content-subhead">Vertical Menu<a href="#vertical-menu" class="content-link" title="Heading anchor"></a></h2><p>Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.</p><div class="example"><div><style>
    .custom-restricted-width {
        /* To limit the menu width to the content of the menu: */
        display: inline-block;
        /* Or set the width explicitly: */
        /* width: 10em; */
    }
</style>
<div class="pure-menu custom-restricted-width">
    <span class="pure-menu-heading">Yahoo Sites</span>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-heading">More Sites</li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Games</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">OMG!</a>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span>&gt;</span><span class="css">
    <span style="color:#19469d">.custom-restricted-width</span> {
        <span style="color:#408080;font-style:italic">/* To limit the menu width to the content of the menu: */</span>
        <span style="color:#000080;font-weight:normal">display</span>: inline-block;
        <span style="color:#408080;font-style:italic">/* Or set the width explicitly: */</span>
        <span style="color:#408080;font-style:italic">/* width: 10em; */</span>
    }
</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu custom-restricted-width&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">span</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-heading&quot;</span>&gt;</span>Yahoo Sites<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">span</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Flickr<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Messenger<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Sports<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Finance<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-heading&quot;</span>&gt;</span>More Sites<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Games<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>News<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>OMG!<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="horizontal-menu" class="content-subhead">Horizontal Menu<a href="#horizontal-menu" class="content-link" title="Heading anchor"></a></h2><p>To create a horizontal menu, add the <code>pure-menu-horizontal</code> class name.</p><div class="example"><div><div class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu pure-menu-horizontal&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-heading pure-menu-link&quot;</span>&gt;</span>BRAND<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>News<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Sports<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Finance<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="selected-and-disabled-items" class="content-subhead">Selected and Disabled Items<a href="#selected-and-disabled-items" class="content-link" title="Heading anchor"></a></h2><p>Mark a selected list element by adding the <code>pure-menu-selected</code> class to the list element. To mark a link as disabled, add the class name <code>pure-menu-disabled</code> to the list element. Disabled items appear faded and do not inherit hover styles.</p><div class="example"><div><div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Selected</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Normal</a>
        </li>
        <li class="pure-menu-item pure-menu-disabled">
            <a href="#" class="pure-menu-link">Disabled</a>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu pure-menu-horizontal&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-selected&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Selected<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Normal<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-disabled&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Disabled<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="dropdowns" class="content-subhead">Dropdowns<a href="#dropdowns" class="content-link" title="Heading anchor"></a></h2><p>We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, <a href="/js/menus.js">an example script</a> written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.</p><p>Even with JavaScript in place, you still might want to display submenus on hover. Just add <code>pure-menu-allow-hover</code> to the <code>pure-menu-has-children</code> list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.</p><div class="example"><div><div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Email</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Twitter</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Tumblr Blog</a>
                </li>
            </ul>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu pure-menu-horizontal&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-selected&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Home<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-has-children pure-menu-allow-hover&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">id</span>=<span style="color:#219161">&quot;menuLink1&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Contact<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-children&quot;</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Email<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Twitter<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Tumblr Blog<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="vertical-menu-with-submenus" class="content-subhead">Vertical Menu with Submenus<a href="#vertical-menu-with-submenus" class="content-link" title="Heading anchor"></a></h2><p>The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.</p><div class="example"><div><div class="pure-menu custom-restricted-width">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item pure-menu-has-children">
            <a href="#" id="menuLink1" class="pure-menu-link">More</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Autos</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Flickr</a>
                </li>
                <li class="pure-menu-item pure-menu-has-children">
                    <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Foo</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Bar</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Baz</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu custom-restricted-width&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-selected&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Flickr<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Messenger<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Sports<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Finance<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-has-children&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">id</span>=<span style="color:#219161">&quot;menuLink1&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>More<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-children&quot;</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Autos<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Flickr<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item pure-menu-has-children&quot;</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">id</span>=<span style="color:#219161">&quot;menuLink1&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Even More<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-children&quot;</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Foo<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Bar<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
                            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Baz<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
                        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
                    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
                <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="scrollable-horizontal-menu" class="content-subhead">Scrollable Horizontal Menu<a href="#scrollable-horizontal-menu" class="content-link" title="Heading anchor"></a></h2><p>To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When there isn&#x27;t enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like <a href="https://github.com/ilyashubin/scrollbooster">scrollbooster</a> to add such effects.</p><div class="example"><div><div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Autos</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Beauty</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Movies</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Small Business</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Cricket</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Tech</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">World</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Support</a>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu pure-menu-horizontal pure-menu-scrollable&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link pure-menu-heading&quot;</span>&gt;</span>Yahoo<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Home<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Flickr<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Messenger<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Sports<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Finance<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Autos<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Beauty<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Movies<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Small Business<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Cricket<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Tech<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>World<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>News<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Support<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="scrollable-vertical-menu" class="content-subhead">Scrollable Vertical Menu<a href="#scrollable-vertical-menu" class="content-link" title="Heading anchor"></a></h2><p>To create a scrollable vertical menu, limit the height of your menu, and then add the <code>pure-menu-scrollable</code> class name. The menu items can be scrolled or flicked. Submenus are not supported.</p><div class="example"><div><style>
    /* Customization to limit height of the menu */
    .custom-restricted {
        height: 160px;
        width: 150px;
        border: 1px solid gray;
        border-radius: 4px;
    }
</style>
<div class="pure-menu pure-menu-scrollable custom-restricted">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Autos</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Beauty</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Movies</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Small Business</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Cricket</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Tech</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">World</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Support</a>
        </li>
    </ul>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span>&gt;</span><span class="css">
    <span style="color:#408080;font-style:italic">/* Customization to limit height of the menu */</span>
    <span style="color:#19469d">.custom-restricted</span> {
        <span style="color:#000080;font-weight:normal">height</span>: <span style="color:#40a070">160px</span>;
        <span style="color:#000080;font-weight:normal">width</span>: <span style="color:#40a070">150px</span>;
        <span style="color:#000080;font-weight:normal">border</span>: <span style="color:#40a070">1px</span> solid gray;
        <span style="color:#000080;font-weight:normal">border-radius</span>: <span style="color:#40a070">4px</span>;
    }
</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu pure-menu-scrollable custom-restricted&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link pure-menu-heading&quot;</span>&gt;</span>Yahoo<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-list&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Home<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Flickr<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Messenger<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Sports<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Finance<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Autos<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Beauty<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Movies<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Small Business<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Cricket<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Tech<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>World<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>News<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-item&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-menu-link&quot;</span>&gt;</span>Support<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h2 id="responsive-menus-that-hide" class="content-subhead">Responsive Menus That Hide<a href="#responsive-menus-that-hide" class="content-link" title="Heading anchor"></a></h2><p>Check out our <a href="/layouts/">Layout Examples</a> to see how you can use Pure as a foundation for more complex menus, such as:</p><div class="example"><div><ul>
    <li>
        <a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which collapses behind a hamburger, similar to the menu on this Pure website.
    </li>
    <li>
        <a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>, which tucks out of the way on small screens.
    </li>
    <li>
        <a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>, which slides out of view.
    </li>
</ul></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">ul</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;/layouts/side-menu/&quot;</span>&gt;</span>Responsive Vertical Menu<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>, which collapses behind a hamburger, similar to the menu on this Pure website.
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;/layouts/tucked-menu/&quot;</span>&gt;</span>Responsive Horizontal-Scrollable Menu<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>, which tucks out of the way on small screens.
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;/layouts/tucked-menu-vertical/&quot;</span>&gt;</span>Responsive Horizontal-to-Vertical Menu<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>, which slides out of view.
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">li</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">ul</span>&gt;</span></code></pre></div></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/2.5dabb085.js"></script>

<script src="/52fb11dd.87d97c96.js"></script>


</body>
</html>